import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import Menu, { SubMenu, Item as MenuItem } from "@icedesign/menu";
import { Icon } from "@icedesign/base";

import { headerMenuConfig } from "./../../constant/menuConfig";
import Logo from "../Logo";
import "./Header.scss";

@withRouter
export default class Header extends Component {
  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      selNav: this.props.location.pathname
    };
  }
  selectNav = e => {
    if (this.props.location.pathname !== e.target.id) {
      this.props.history.push(e.target.id);
      this.setState({
        selNav: e.target.getAttribute("data-index")
      });
    }
  };
  render() {
    let that = this;
    const { location = {} } = this.props;
    const { pathname } = location;
    return (
      <div className="header-container">
        <div className="header-content">
          <Logo />
          <ul className="nav-tab" onClick={this.selectNav}>
            {headerMenuConfig.map((item, index) => {
              return (
                <li
                  key={index}
                  id={item.path}
                  data-index={index}
                  className={item.path === that.state.selNav ? "sel-li" : ""}
                >
                  <Icon type={item.icon} />
                  <span className="nav-tab-text">{item.name}</span>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
